<!DOCTYPE html>
<html class="feedback">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>预约服务</title>
		<link rel="stylesheet" type="text/css" href="/css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="/css/feedback.css" />
		<link rel="stylesheet" type="text/css" href="/css/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="/css/mui.poppicker.css" />
		<style>
			h5.mui-content-padded {
				margin-left: 3px;
				margin-top: 20px !important;
			}
			h5.mui-content-padded:first-child {
				margin-top: 12px !important;
			}
			.ui-alert {
				text-align: center;
				padding: 20px 10px;
				font-size: 16px;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">预约服务</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<form class="mui-input-group" id="form" method="post" action="/my/coupon_order_save">
					@csrf
					<input type="hidden" name="coupon_id" id="coupon_id" value="{{$coupon_id}}">
					<div class="mui-input-row">
						<label>服务内容</label>
						<select name="coupon_code" id="coupon_code">
							<option value="{{$coupon_code}}">{{$coupon_name}}</option>
						</select>
					</div>
					<div class="mui-input-row">
						<label>联系人</label>
						<input type="text" name="fullname" id="fullname" placeholder="请输入用户名">
					</div>
					<div class="mui-input-row">
						<label>手机号码</label>
						<input type="text" name="phone" id="phone"  placeholder="请输入手机号码">
					</div>
					<div class="mui-input-row">
						<label>所在城市</label>
						<input type="text" id="showCityPicker3" name="city" placeholder="请选择所在城市">
						<input type="hidden" id="showCityPicker3Code" name="cityCode" placeholder="请选择所在城市">
					</div>
					<div class="mui-input-row">
						<label>详细地址</label>
						<input type="text"  name="home" id="home" placeholder="请输入详细小区名称及门牌号">
					</div>
					<div class="mui-input-row">
						<label>预约日期</label>
						<input type="text" id="serverDate" name="date" placeholder="请选择预约日期">
					</div>
					<div class="mui-input-row">
						<label>预约时段</label>
						<select name="time" id="time">
							<option value="8:00-10:00">8:00-10:00</option>
							<option value="10:00-12:00">10:00-12:00</option>
							<option value="12:00-14:00">12:00-14:00</option>
							<option value="14:00-16:00">14:00-16:00</option>
							<option value="16:00-18:00">16:00-18:00</option>
							<option value="18:00-20:00">18:00-20:00</option>
						</select>
					</div>
					<div class="mui-input-row">
						<label>备注</label>
						<textarea id="textarea" name="remark" rows="3" placeholder="多行文本框"></textarea>
					</div>
					<div class="mui-button-row">
						<button id="submitBtn" type="button" class="mui-btn mui-btn-primary">确认</button>
						<button id="cancelBtn" type="button" class="mui-btn mui-btn-danger">取消</button>
					</div>
				</form>
			</div>
		</div>
		<script src="/js/mui.min.js"></script>
		<script src="/js/mui.picker.min.js"></script>
		<script src="/js/mui.poppicker.js"></script>
		<script src="/js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			mui.ready(function() {
				var cityPicker3 = new mui.PopPicker({layer: 4});
				cityPicker3.setData(cityData3);
				mui('body').on('tap', '#showCityPicker3', function(event) {
					cityPicker3.show(function(items) {
						cityVal = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text')+ " " + _getParam(items[3], 'text')
						cityValCode = _getParam(items[0], 'value') + " " + _getParam(items[1], 'value') + " " + _getParam(items[2], 'value') + " " + _getParam(items[3], 'value')
						document.getElementById('showCityPicker3').value = cityVal;
						document.getElementById('showCityPicker3Code').value = cityValCode;
					});
				});

				mui('body').on('tap', '#serverDate', function() {
					var _self = this;
					if (_self.picker) {
						_self.picker.show(function(rs) {
							document.getElementById('serverDate').value = rs.text;
							_self.picker.dispose();
							_self.picker = null;
						});
					} else {
						var optionsJson = '{"type":"date","beginYear":2020,"endYear":2021}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						_self.picker = new mui.DtPicker(options);
						_self.picker.show(function(rs) {
							document.getElementById('serverDate').value = rs.text;
							_self.picker.dispose();
							_self.picker = null;
						});
					}

				});
				
				mui('body').on('tap', '#submitBtn', function () {
//					mui.alert('预约成功', function() {
//						// window.location = 'main.html';
//						document.getElementById('form').submit();
//					});
//                    document.getElementById('form').submit();
                    var $getSelectValue = function getSelectValue($id){
                        var rdsObj = document.getElementById($id);
                        var checkVal = null;
                        for(i = 0; i < rdsObj.length; i++){
                            if(rdsObj[i].selected){checkVal = rdsObj[i].value;}
                        }
                        return  checkVal ;
                    };
                    var coupon_id = mui('#coupon_id')[0].value;
                    var coupon_code = mui('#coupon_code')[0].value;
                    var fullname = mui('#fullname')[0].value;
                    var phone = mui('#phone')[0].value;
                    var city = mui('#showCityPicker3')[0].value;
                    var cityCode = mui('#showCityPicker3Code')[0].value;
                    var home = mui('#home')[0].value;
                    var date = mui('#serverDate')[0].value;
                    var time = $getSelectValue('time');
                    var remark = mui('#textarea')[0].value;
                    mui.post('/my/coupon_order_save',{
                            _token:'{{csrf_token()}}',
							coupon_id: coupon_id,
							coupon_code: coupon_code,
							fullname: fullname,
							phone: phone,
							city: city,
							cityCode: cityCode,
							home: home,
							date: date,
							time: time,
							remark: remark
                        },function(data){
                            if(data.code!=0){
                                mui.alert(data.msg);
                            }else {
                                mui.alert('预约成功', function() {
                                    window.location.href = "/my/orders";
                                });
                            }
                        },'json'
                    );
				});
				
				mui('body').on('tap', '#cancelBtn', function() {
					history.go(-1);
				});
			});

			var _getParam = function(obj, param) {
				return obj[param] || '';
			};
			@if(!empty(session('err_msg')))
            mui.alert('{{session('err_msg')}}', function() { });
			@endif

		</script>
	</body>
</html>